<template>
  <div class="device-list-container">
    <!-- <h2>设备巡检数据列表</h2> -->
    <div class="device-list">
      <div v-for="(device, index) in devices" :key="index" class="device-card">
        <div class="device-name">{{ device.name }}</div>
        <div class="device-ip">IP: {{ device.ipAddress }}</div>
        <div class="device-status" :class="statusClass(device.status)">
          状态: {{ device.status }}
        </div>
        <div class="device-cpu">CPU 使用率: {{ device.cpuUsage }}%</div>
        <div class="device-memory">内存使用率: {{ device.memoryUsage }}%</div>
        <div class="device-disk">磁盘空间: {{ device.diskSpace }} GB</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VerticalDeviceList",
  data() {
    return {
      devices: this.generateInitialDevices(),
      intervalId: null,
    };
  },
  mounted() {
    // 每2秒更新一次设备数据（可选）
    this.intervalId = setInterval(() => {
      this.devices = this.generateInitialDevices();
    }, 2000);
  },
  beforeUnmount() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  methods: {
    statusClass(status) {
      return {
        "status-normal": status === "正常",
        "status-warning": status === "警告",
        "status-danger": status === "严重",
      };
    },
    generateInitialDevices() {
      const statuses = ["正常", "警告", "严重"];
      const devices = [];

      for (let i = 1; i <= 8; i++) {
        const randomStatus =
          statuses[Math.floor(Math.random() * statuses.length)];
        const cpuUsage = Math.floor(Math.random() * 100);
        const memoryUsage = Math.floor(Math.random() * 100);
        const diskSpace = Math.floor(Math.random() * 1000);

        devices.push({
          name: `服务器 ${i}`,
          ipAddress: `192.168.1.${100 + i}`,
          status: randomStatus,
          cpuUsage: cpuUsage,
          memoryUsage: memoryUsage,
          diskSpace: diskSpace,
        });
      }

      return devices;
    },
  },
};
</script>

<style scoped>
.device-list-container {
  z-index: 10000000000;
  left: 3vw;
  top: 10vh;
  position: fixed;
  height: 80vh;
  overflow: scroll;
  width: 300px;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #fff;
}

.device-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.device-card {
  background-color: #19347485;
  border-left: 5px solid #4caf50;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.device-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.device-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}

.device-ip,
.device-cpu,
.device-memory,
.device-disk {
  font-size: 14px;
  /* color: #555; */
  margin: 4px 0;
}

.device-status {
  font-weight: bold;
  margin-top: 8px;
}

.status-normal {
  color: green;
}

.status-warning {
  color: orange;
}

.status-danger {
  color: red;
}
</style>
